<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>lesson4</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>

<script>
    const app = Vue.createApp({
        data() {
            return {
                inputValue: '',
                list: []
            }
        },
        methods: {
            handleAddItem() {
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        },
        template: `
        <div>
            <input v-model="inputValue"/>
            <button v-on:click="handleAddItem" v-bind:title="inputValue">增加</button>
            <ul>
                <todo-item v-for="(item, index) of list" />
            </ul>
        </div>
        `
    });

    app.component('todo-item', {
        template: `<div>hello world</div>`
    });

    app.mount('#root');
</script>

</html>